import {WeaTablePage, WeaBrowser, WeaAlertPage,WeaNewScroll} from 'ecCom';
import MeetTopicTimeDialog from "./MeetTopicTimeDialog";
import MeetTopicTidyDialog from "./MeetTopicTidyDialog";
import {Button,Modal} from 'antd';
import Util from '../../../../util/util';

const confirm = Modal.confirm;
import {inject, observer} from 'mobx-react';
import {observable, action, toJS} from 'mobx';
import {WeaLocaleProvider} from 'ecCom';

const getLabel = WeaLocaleProvider.getLabel;

@inject('meetingDialog')
class MeetTopic extends React.Component {
  constructor(props) {
    super(props);
    this.browserProps = {
      "completeParams": {},
      "conditionDataParams": {},
      "dataParams": {},
      "destDataParams": {},
      "hasAddBtn": true,
      "hasAdvanceSerach": true,
      "idSeparator": ",",
      "isAutoComplete": 1,
      "isDetail": 0,
      "isMultCheckbox": false,
      "isSingle": true,
      "linkUrl": "/spa/document/index.jsp?id=",
      "pageSize": 10,
      "quickSearchName": "",
      "title": getLabel(126529, "文档"),
      "type": "9",
      "viewAttr": 2,
      customized: true,
      onChange: this.chooseDoc
    };
    this.operates = [
      {
        flag: "true",
        key: "time",
        text: getLabel(82903, "安排时间"),
        index: 'time'
      },
      {
        flag: "true",
        key: "doc",
        text: (
          <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@5r2dzq@supportDoc`} {...this.browserProps} >
            {getLabel(82902, "提供资料")}
          </WeaBrowser>
        ),
        index: 'doc'
      }
    ];
    this.state = {
      record: {}
    };
  }

  render() {
    let {meetingId} = this.props;
    let {dialogStatus, setEditTableCloumnCount} = this.props.meetingDialog;
    const {tabTopic} = dialogStatus
    let {columns = [], datas = [], subject} = this.props.data || {};
    columns.forEach((col) => {
      col.display = 'true';
      if (col.key == "topicdate") {
        col.dataIndex = col.key;
        col.render = (text, record, index) => {
          let textTip = "";
          Array.isArray(text) && text.forEach((t) => {
            textTip += t;
            textTip += "\n";
          });
          return (
            <span title={textTip}>
                            {Array.isArray(text) && text.map((t) => <span style={{display: 'block'}}>{t}</span>)}
                        </span>
          );
        }
      } else {
        col.render = Util.tableCol.render(col);
      }
    });
    datas.forEach((data, index) => {
      if (!data) return;
      data.randomFieldOp = {
        time: data.btns && data.btns[0],
        doc: data.btns && data.btns[1]
      };
      data.randomFieldId = index;
      data.key = index;
    });
    return (
      <div className="wea-meeting-topic-view">
        <div className="edit-title">
          <span className="title">{getLabel(383558, "议程列表")}</span>
          {tabTopic&&tabTopic.showTidy&&<span className="cursor-pointer" style={{float:'right', marginTop: -7}}>
            <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@m4mag7`} key="doEdit" type="primary"  onClick={this.onShowTopic}>{getLabel(2210, '整理')}</Button>
          </span>}
        </div>
        {columns.length == 0 || datas.length == 0 ?
          <WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@3v2otq`} icon="icon-blog-blank">
            <div style = {{color : '#ccc'}}>
              {getLabel(83553,'暂无数据')}
          </div>
          </WeaAlertPage> :
          <WeaTablePage ecId={`${this && this.props && this.props.ecId || ''}_WeaTablePage@d8iwio`} columns={columns} datas={datas} loading={false} pagination={false}
                        className="topic-view-table meeting-topic-view-table-scroll"
                        operates={this.operates}
                        onOperatesClick={this.operate}
                        expandIconAsCell={true}
                        expandRowByClick={true}
                        expandedRowRender={this.expandRow}
                        needScroll={true}
                        tableWidth={columns.length > setEditTableCloumnCount ? 100*columns.length : ''}
                        outerHeight={ this.props.height + 55 }
          />
        }
      
        
        
        <MeetTopicTimeDialog ecId={`${this && this.props && this.props.ecId || ''}_MeetTopicTimeDialog@wpxzrq`} ref="timeDialog" titleKey={subject} meetingId={meetingId}/>
        <MeetTopicTidyDialog ecId={`${this && this.props && this.props.ecId || ''}_MeetTopicTidyDialog@eziv7j`} ref="tidyDialog" meetingId={meetingId}/>
      </div>
    );
  }

  onShowTopic=()=>{
    this.refs.tidyDialog.wrappedInstance.open();
  }

  operate = (record, index, operate, flag) => {
    this.setState({
      record: record
    });
    if (operate.key == "time") {
      this.refs.timeDialog.wrappedInstance.open(record);
    }
  }

  expandRow = (record, index) => {
    if (!record.doclist || record.doclist.length == 0) return undefined;
    let {meetingId} = this.props;
    return (
      <div className="expand">
        <table>
          <tbody>
          {record.doclist.map((doc) => {
            return (
              <tr>
                <td style={{width: "60%"}} className="noWrap"><a href={Util.href.doc(doc.docid, meetingId)}
                                              target="_blank">{doc.docname}</a></td>
                <td style={{width: "15%"}} className="noWrap"><a href={`javaScript:openhrm(${doc.hrmid});`} onClick={window.pointerXY}
                                              title={doc.hrmname}>{doc.hrmname}</a></td>
                <td style={{width: "20%"}} className="noWrap">{doc.canClose?<span onClick={this.deleteDoc.bind(this, doc, index)}
                                                 className="ant-modal-close-x cursor-pointer"></span>:''}</td>
              </tr>
            );
          })}
          </tbody>
        </table>
      </div>
    );
  }
  deleteDoc = (doc, dataIndex) => {
    confirm({
      title: `${getLabel(383561, "确认要删除")} ${doc.docname} ${getLabel(383562, "这篇文档吗")}？`,
      onOk: () => {
        let {delTopicDoc} = this.props.meetingDialog;
        return delTopicDoc({id: doc.id}, dataIndex);
      }
    });
  }
  chooseDoc = (ids, names, datas) => {
    let {addTopicDoc} = this.props.meetingDialog;
    let {meetingId} = this.props;
    let {record} = this.state;
    addTopicDoc({meetingid: meetingId, topicid: record.id, docid: ids}, record);
  }
}

export default MeetTopic;